<template>
  <section class="designList">
    <el-row :gutter="40" type="flex" justify="space-between">
      <el-col :span="12">
        <div class="flex-box">
          <el-input class="fl" placeholder="请输入内容"
           v-model="condition.title"
           @blur="fetchData"
           @keyup.enter.native='serachFilter'

          prefix-icon="el-icon-search el-input__icon"  />
        </div>
      </el-col>

      <el-col :span="4" v-show='!categorytagsList'>
           <el-popover
            placement="bottom"
            trigger="click"
            >
            <el-button slot="reference" type="primary" >添加</el-button>
            <div class="flBox">
              <el-button @click="$router.push({path:'/createResult/uploadLessonPlan'})" >学科成长</el-button>
              <el-button @click="$router.push({path:'/createResult/uploadLessonPlanTrainer'})">教师成长</el-button>
            </div>
          </el-popover>
      </el-col>
    </el-row>
    <ClassifyDress @conditionSelect="conditionSelect" clearable type='select'/>
    <div class="cpBox">

    <el-row class="listBox searchCon toolbar"   v-if="list.length">
      <template v-if="!span">
        <el-col :span="12" :xs='20'  :key=li :sm="12"  :lg="8" class="lesson_list_Con" v-for='(lesItem,li) in list'>
       <div @click="goDetails(lesItem.id)" > <LessonList :list='lesItem'/> </div>
     </el-col>
      </template>
      <template v-else>
        <el-col :key="li" class="lesson_list_Con" v-for='(lesItem,li) in list'>
        <div @click='intorFn(lesItem)' > <LessonList :list='lesItem' /> </div>
     </el-col>
      </template>
    </el-row>
    <div v-noData v-else ></div>
      </div>
    <Pagination
      :total="total"
      :float="'right'"
      class="pagination"
      @pagination="pagination"
    />
  </section>
</template>

<script>
     import Pagination from '@/components/Pagination'
     import ClassifyDress from '@/components/classifyDressing'
     import LessonList from '@/components/LessonList'
     export default {
      name: 'DesignList',
      data() {
          return {
            total:0,
            listQuery:{
             pager: this.$store.state.app.pager
            },
            condition:{
              categoryList:[],
              userId:!this.span ?this.$store.getters.userId:null
            },
            prepareLessonType:'TEACHER',
            growth_classify:{},
            classifyOptions: {
            },
            // TRAINERList:[]
          }
      },
      props:{
        categorytagsList:{
          type:[Array,Boolean],
          default:()=>false
        },
        span:{
          type:[Boolean,Number],
          defalut:false
        }
      },
      components:{
      // noPerpare,
      ClassifyDress,
       LessonList,
       Pagination
      },
      mounted() {
      },
      created() {

      },
     // props:['condition'],
      watch:{
        categorytagsList(val){
          if(val){
            this.condition.categoryList = val
            delete this.condition.userId
            this.getPreparePage(this.condition)
          }
        }
      },
      computed:{
       // categorytagsList(val){
       //   var val =  this.$store.state.personPrepareLesson.getClassfiyageListName
       //   if(val){
       //     this.condition.categoryList = val
       //     delete this.condition.userId
       //     this.getPreparePage(this.condition)
       //   }
       //   return this.$store.state.personPrepareLesson.getClassfiyageListName
       // },
        list(){
           var info =  this.$store.state.personPrepareLesson.prepareLesson
           this.total = info.total?info.total:0
           info.records = info.records?info.records:[]
           return info.records
        },
      },
      methods: {
      // handlegGrowth(key, keyPath) {
      //     console.log(key, keyPath);
      // },
      intorFn(lesItem){
        this.$emit("lookDetails",lesItem)
      },
      goDetails(designId){
        this.$router.push({name:'teachDesignDetails',query:{designId}})
      },
      serachFilter(val){
         this.condition.categoryList = []
         this.fetchData()
      },
      fetchData(){
        this.getPreparePage(this.condition)
      },
      conditionSelect(val){
        console.log("isFromStep",val)
        var that = this
            this.condition.categoryList  =  Object.assign(that.condition.categoryList,val)
            this.condition.categoryList = val.filter((list,i)=>{
              if(i===0){
                 that.condition.prepareLessonType = list
              }else{
                return list
              }
            })
            if(this.categorytagsList.length||(!this.span&&!val.length&&!this.categorytagsList.length)|| val.length){
              //if(this.categorytagsList) this.condition.categoryList = this.categorytagsList
              this.getPreparePage(this.condition)
            }
      },
      getPreparePage(conditions){
          let condition = Object.assign({
            },conditions)
          let params = {
            condition,
           "orderBys": [
            {
              "asc": true,
              "column": ""
            }
          ],
          "pager":this.listQuery.pager
        }
        this.condition = condition
        this.$store.dispatch('personPrepareLesson/Page',{params,stateName:condition.prepareLessonType})
        this.prepareLessonType = condition.prepareLessonType+'List'
      },
      prepareLessons(){
        this.$router.push({path:`/createResult/uploadLessonPlan`})
      },
      pagination ({ page, limit }) {
        this.listQuery.pager.page = page
        this.listQuery.pager.pageSize = limit
        this.fetchData(this.condition)
      }
      }
    }
</script>

<style lang="scss" scoped>
  $bg:#2EB06F;
  $gray:#E6F5ED;
  $labg:#ddeae4;
  $textColr-2:rgba(0, 0, 0, .45);
  // .classfiy_box {
  //     margin: 20px 0;
  //     padding: 15px 18px;
  //     border: 1px solid $bg;
  //     .class_link {
  //       padding: 5px;
  //       margin: 5px;
  //     }
  //   }
  .designList {
    // padding: 24px 40px;
    .cpBox{
      height:calc(100vh - 370px );
      .searchCon {
          //margin: 15px -30px;
          line-height: 1.8;
          .lesson_list_Con {
            i,
            .labelSpan {
              color: $textColr-2;
              font-size: 12px;
            }
            >div {
              padding: 10px;
             // border: rgba(0, 0, 0, .08) 1px dashed;
            padding:10px;
            }
            }
        }

    }
    }
</style>
